<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            plain
            icon="Close"
            @click="handleClose"
        >关闭
        </el-button>
      </el-col>
    </el-row>
    <el-divider/>
    <el-card>
      <div class="top-box">
        <el-avatar :size="80" :src="form.avatar || url"/>
        <div class="desc_">
          <div>编号：{{ form.no }}</div>
          <div>年龄：{{ form.age || '未填写' }}</div>
          <div>创建日期：{{ form.createTime }}</div>
        </div>
        <div class="desc_">
          <div>姓名：{{ form.name }}</div>
          <div>出生日期：{{ form.birthDate }}</div>
          <div>
            服务状态：
            <el-tag v-if="form.serviceStatus == 1" type="success">正常</el-tag>
            <el-tag v-if="form.serviceStatus == 2" type="danger">停止服务</el-tag>
            <el-tag v-if="form.serviceStatus == 3" type="info">暂停服务</el-tag>
            <el-button type="danger" v-if="form.serviceStatus == 1">解除服务</el-button>
          </div>
        </div>
        <div class="desc_">
          <div>性别：
            <dict-tag :options="sys_user_sex" :value="form.gender"/>
          </div>
          <div>失能等级：{{ form.disabilityLevel }}</div>
        </div>
        <div class="btn-box">
          <div>
            <el-button type="primary">表格打印</el-button>
          </div>
          <div>
            <el-button type="primary">床头卡设置</el-button>
          </div>
        </div>
        <div>
          <el-image style="width: 100px; height: 100px"
                    src="https://seep.sdstm.cn/oss/upload/image/20251020/1164867326605000704.png" fit="fill"/>
        </div>
      </div>
    </el-card>
    <div style="margin-top: 20px">
      <el-tabs
          v-model="activeName"
          type="border-card"
          class="demo-tabs"
          @tab-click="handleClick"
      >
        <el-tab-pane label="基础信息" name="first">
          <el-form ref="elderlyRef" :model="form" :rules="rules" label-width="110px">
            <el-row :gutter="20">
              <el-col :span="16">
                <el-form-item label="档案编号" prop="no">
                  <el-input v-model="form.no" disabled placeholder="请输入档案编号">
                    <template #append>
                      <el-button type="primary" style="background-color: #409eff; border-color: #409eff; color: white;"
                                 @click="getNo">生成编号
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="一卡通卡号" prop="oneCardNumber">
                  <el-input v-model="form.oneCardNumber" :disabled="!ifEdit" placeholder="请输入一卡通卡号"/>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="form.name" :disabled="!ifEdit" placeholder="请输入姓名"/>
                </el-form-item>
                <el-form-item label="性别">
                  <el-select v-model="form.sex" :disabled="!ifEdit" placeholder="请选择性别">
                    <el-option
                        v-for="dict in sys_user_sex"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="form.age" :disabled="!ifEdit" placeholder="请输入年龄"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="头像">
                  <image-upload v-model="form.headLogo" :limit="1"/>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="出生日期" prop="birthTime">
                  <el-date-picker clearable
                                  v-model="form.birthTime"
                                  type="date" :disabled="!ifEdit"
                                  value-format="YYYY-MM-DD"
                                  placeholder="请选择出生日期"
                                  style="width: 100%">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="联系电话" prop="tel">
                  <el-input v-model="form.tel" :disabled="!ifEdit" placeholder="请输入联系电话"/>
                </el-form-item>
                <el-form-item label="证件类型" prop="documentType">
                  <el-select v-model="form.documentType" :disabled="!ifEdit" placeholder="请选择证件类型">
                    <el-option
                        v-for="dict in document_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="身份证号" prop="idNo">
                  <el-input v-model="form.idNo" :disabled="!ifEdit" placeholder="请输入身份证号"/>
                </el-form-item>
                <el-form-item label="身高" prop="height">
                  <el-input v-model="form.height" :disabled="!ifEdit" placeholder="请输入身高">
                    <template #append>cm</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件图片">
                  <image-upload v-model="form.idPicturePositive" :limit="1"/>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="体重" prop="weight">
                  <el-input v-model="form.weight" :disabled="!ifEdit" placeholder="请输入体重">
                    <template #append>kg</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="民族" prop="nation">
                  <el-select v-model="form.nation" :disabled="!ifEdit" placeholder="请选择民族">
                    <el-option
                        v-for="dict in nation_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="婚姻状况" prop="marital">
                  <el-select v-model="form.marital" :disabled="!ifEdit" placeholder="请选择婚姻状况">
                    <el-option
                        v-for="dict in marital_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="紧急联系人姓名" prop="spouseName">
                  <el-input v-model="form.spouseName" :disabled="!ifEdit" placeholder="请输入紧急联系人姓名"/>
                </el-form-item>
                <el-form-item label="紧急联系人电话" prop="emergencyContactPhone">
                  <el-input v-model="form.emergencyContactPhone" :disabled="!ifEdit"
                            placeholder="请输入紧急联系人电话"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件图片">
                  <image-upload v-model="form.idPictureAgainst" :limit="1"/>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="服务对象类型" prop="serviceObjectType">
                  <el-select v-model="form.serviceObjectType" :disabled="!ifEdit" placeholder="请选择服务对象类型">
                    <el-option
                        v-for="dict in service_object_category"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生日提醒">
                  <el-radio-group v-model="form.birthdayReminder" :disabled="!ifEdit">
                    <el-radio
                        v-for="dict in birthday_reminder"
                        :key="dict.value"
                        :label="dict.value"
                    >{{ dict.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="失能等级" prop="disabilityGrade">
                  <el-select v-model="form.disabilityGrade" :disabled="!ifEdit" placeholder="请选择失能等级">
                    <el-option
                        v-for="dict in disability_grade"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="文化程度" prop="educationalLevel">
                  <el-select v-model="form.educationalLevel" :disabled="!ifEdit" placeholder="请选择文化程度">
                    <el-option
                        v-for="dict in educational_level"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="居住类型" prop="residentialType">
                  <el-select v-model="form.residentialType" :disabled="!ifEdit" placeholder="请选择居住类型">
                    <el-option
                        v-for="dict in residential_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="政治面貌">
                  <el-select v-model="form.politicalStatus" :disabled="!ifEdit" placeholder="请选择政治面貌">
                    <el-option
                        v-for="dict in political_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="住养类别" prop="residentialCareCategory">
                  <el-select v-model="form.residentialCareCategory" :disabled="!ifEdit" placeholder="请选择住养类别">
                    <el-option
                        v-for="dict in residential_care_category"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所说方言" prop="dialect">
                  <el-input v-model="form.dialect" :disabled="!ifEdit" placeholder="请输入所说方言"/>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="宗教信仰" prop="religiousBelief">
                  <el-select v-model="form.religiousBelief" :disabled="!ifEdit" placeholder="请选择宗教信仰">
                    <el-option
                        v-for="dict in religious_belief"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="国籍" prop="nationality">
                  <el-select v-model="form.nationality" :disabled="!ifEdit" placeholder="请选择国籍">
                    <el-option
                        v-for="(item,index)  in dataList"
                        :key="index"
                        :label="item.name_zh"
                        :value="item.name_zh"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="所属社区" prop="community">
                  <el-input v-model="form.community" :disabled="!ifEdit" placeholder="请输入所属社区"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="户口详细地址" prop="residentProvince">
                  <el-select v-model="form.residentProvince" :disabled="!ifEdit" @change="chooseProvince(0)"
                             placeholder="请选择省份"
                             class="select-box">
                    <el-option
                        v-for="(item,index) in provinceList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                    ></el-option>
                  </el-select>
                  <el-select v-model="form.residentCity" @change="chooseCity(0)"
                             :disabled="(!form.residentProvince  && ifEdit) ||  !ifEdit"
                             placeholder="请选择城市"
                             class="select-box">
                    <el-option
                        v-for="(item,index) in cityList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                    ></el-option>
                  </el-select>
                  <el-select v-model="form.residentRegion" @change="chooseRegion(0)"
                             :disabled="(!form.residentCity  && ifEdit) || !ifEdit"
                             placeholder="请选择区域"
                             class="select-box">
                    <el-option
                        v-for="(item,index) in regionList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                    ></el-option>
                  </el-select>
                  <el-select v-model="form.residentStreet" :disabled="(!form.residentRegion  && ifEdit) ||  !ifEdit"
                             placeholder="请选择街道"
                             class="select-box">
                    <el-option
                        v-for="(item,index) in streetList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="户口详细地址" prop="residentDetailedLocation">
                  <el-input v-model="form.residentDetailedLocation" :disabled="!ifEdit"
                            placeholder="请输入户口详细地址"/>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="户籍地址识别" prop="residentDetailedLocation">
                  <el-input
                      v-model="textarea" :disabled="!ifEdit"
                      :rows="6"
                      type="textarea"
                      placeholder="智能解析:粘贴或者输入整段文字，自动识别省市区街道，如:广东省广州市越秀区黄花岗街道新达广场南座1609号"
                  />
                  <el-button class="btn_" size="small" type="success" @click="handleRecognize(1,textarea)">识别
                  </el-button>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="现住地址" prop="nowProvince">
                  <el-select v-model="form.nowProvince" :disabled="!ifEdit" @change="chooseProvince(1)"
                             placeholder="请选择省份"
                             class="select-box">
                    <el-option
                        v-for="(item,index) in provinceList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                    ></el-option>
                  </el-select>
                  <el-select v-model="form.nowCity" @change="chooseCity(1)"
                             :disabled="(!form.nowProvince  && ifEdit) ||  !ifEdit"
                             placeholder="请选择城市"
                             class="select-box">
                    <el-option
                        v-for="(item,index) in cityList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                    ></el-option>
                  </el-select>
                  <el-select v-model="form.nowRegion" @change="chooseRegion(1)"
                             :disabled="(!form.nowCity  && ifEdit) ||  !ifEdit"
                             placeholder="请选择区域" class="select-box">
                    <el-option
                        v-for="(item,index) in regionList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                    ></el-option>
                  </el-select>
                  <el-select v-model="form.nowStreet" :disabled="(!form.nowRegion && ifEdit) || !ifEdit"
                             placeholder="请选择街道"
                             class="select-box">
                    <el-option
                        v-for="(item,index) in streetList"
                        :key="index"
                        :label="item.name"
                        :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="现住详细位置" prop="nowDetailedLocation">
                  <el-input v-model="form.nowDetailedLocation" :disabled="!ifEdit" placeholder="请输入现住详细位置"/>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="现住地址识别" prop="residentDetailedLocation">
                  <el-input
                      v-model="textarea1" :disabled="!ifEdit"
                      :rows="6"
                      type="textarea"
                      placeholder="智能解析:粘贴或者输入整段文字，自动识别省市区街道，如:广东省广州市越秀区黄花岗街道新达广场南座1609号"
                  />
                  <el-button class="btn_" size="small" type="success" @click="handleRecognize(2,textarea1)">识别
                  </el-button>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="门头照">
                  <image-upload v-model="form.storefrontPhoto" limit="3"/>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" :disabled="!ifEdit" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
          <div>
            <el-button @click="handleClose">关 闭</el-button>
            <el-button type="primary" @click="submitForm" :disabled="!ifEdit">保 存</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="家属信息" name="second">
          <el-table v-loading="loading" :data="followUpRecord">
            <el-table-column label="序号" align="center" type="index" width="60"/>
            <el-table-column label="跟进人" align="center" prop="oneConsultantName"/>
            <el-table-column label="客户等级" align="center" prop="elderName"/>
            <el-table-column label="跟进时间" align="center" prop="createTime" width="180"/>
            <el-table-column label="跟进内容" align="center" prop="consultStatus"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button
                    type="text"
                    icon="Edit"
                >修改
                </el-button>
                <el-button
                    type="text"
                    icon="Delete"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
              v-show="total>0"
              :total="total"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="getFollowUpList"
          />
        </el-tab-pane>
        <el-tab-pane label="附件资料" name="third">
          <el-table v-loading="loading" :data="visitRecord">
            <el-table-column label="序号" align="center" type="index" width="60"/>
            <el-table-column label="接待人" align="center" prop="oneConsultantName"/>
            <el-table-column label="参观时间" align="center" prop="elderName"/>
            <el-table-column label="参观情况" align="center" prop="consultStatus"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button
                    type="text"
                    icon="Edit"
                >修改
                </el-button>
                <el-button
                    type="text"
                    icon="Delete"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
              v-show="total1>0"
              :total="total1"
              v-model:page="queryParams1.pageNum"
              v-model:limit="queryParams1.pageSize"
              @pagination="getVisitList"
          />
        </el-tab-pane>
        <el-tab-pane label="病历病史" name="fourth">
          <el-table v-loading="loading" :data="operationRecord">
            <el-table-column label="序号" align="center" type="index" width="60"/>
            <el-table-column label="操作时间" align="center" prop="elderName"/>
            <el-table-column label="操作人" align="center" prop="oneConsultantName"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button
                    type="text"
                    icon="Edit"
                >修改
                </el-button>
                <el-button
                    type="text"
                    icon="Delete"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
              v-show="total2>0"
              :total="total2"
              v-model:page="queryParams2.pageNum"
              v-model:limit="queryParams2.pageSize"
              @pagination="getOperationList"
          />
        </el-tab-pane>
        <el-tab-pane label="自带药品" name="fifth">附件资料</el-tab-pane>
        <el-tab-pane label="自带物品" name="sixth">病历病史</el-tab-pane>
        <el-tab-pane label="告知书" name="seventh">自带药品</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import {useRoute} from 'vue-router';
import dataList from "@/api/nationality.js";
import {
  getServiceObject,
  getServiceObjectNo,
  updateServiceObject
} from "@/views/record/serviceObject/api/serviceObject.js";

const route = useRoute();

const {proxy} = getCurrentInstance();
const {
  marital_status,
  residential_care_category,
  political_status,
  service_object_category,
  religious_belief,
  disability_grade,
  birthday_reminder,
  educational_level,
  document_type,
  sys_user_sex,
  residential_type,
  nation_type
} = proxy.useDict('marital_status', 'residential_care_category', 'political_status', 'service_object_category', 'religious_belief', 'disability_grade', 'birthday_reminder', 'educational_level', 'document_type', 'sys_user_sex', 'residential_type', 'nation_type');

const id = computed(() => route.query.id)
const ifEdit = computed(() => route.query.ifEdit == 'true')

const form = ref({})
const activeName = ref('first')
const url = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
const textarea = ref('')
const textarea1 = ref('')
const provinceList = ref([]);
const cityList = ref([]);
const regionList = ref([]);
const streetList = ref([]);

const loading = ref(false)
const followUpRecord = ref([])
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const visitRecord = ref([])
const total1 = ref(0)
const queryParams1 = ref({
  pageNum: 1,
  pageSize: 10,
})
const operationRecord = ref([])
const total2 = ref(0)
const queryParams2 = ref({
  pageNum: 1,
  pageSize: 10,
})

const rules = ref({
  name: [
    {required: true, message: "名称不能为空", trigger: "blur"}
  ],
  no: [
    {required: true, message: "档案编号不能为空", trigger: "blur"}
  ],
  nowDetailedLocation: [
    {required: true, message: "现居住地址不能为空", trigger: "blur"}
  ],
})

onMounted(() => {
  console.log(ifEdit.value, 580)
  getElderlyInfo()
})

function handleClick(event) {
  console.log(event, 67)
}

function handleRecognize(type, address) {
  let province = provinceList.value.filter(item => address.includes(item.name));
  let city = province || null;
  let region = city || null;
  let street = region || null;
  let desc = address;
  if (province && province.length > 0) {
    city = province[0].children.filter(item => address.includes(item.name))
    desc = desc.replace(province[0].name, '').trim();
    if (city) {
      region = city[0].children.filter(item => address.includes(item.name));
      desc = desc.replace(city[0].name, '').trim();
      if (region) {
        street = region[0].children.filter(item => address.includes(item.name));
        desc = desc.replace(region[0].name, '').trim();
        if (street) desc = desc.replace(street[0].name, '').trim();
      }
    }
  }
  // 户籍
  if (type == 1) {
    form.value.residentProvince = province[0].name
    form.value.residentCity = city[0].name
    form.value.residentRegion = region[0].name
    form.value.residentStreet = street[0].name
    form.value.residentDetailedLocation = desc
  }
  // 现住址
  if (type == 2) {
    form.value.nowProvince = province[0].name
    form.value.nowCity = city[0].name
    form.value.nowRegion = region[0].name
    form.value.nowStreet = street[0].name
    form.value.nowDetailedLocation = desc
  }
}

function getNo() {
  getServiceObjectNo().then(res => {
    form.value.no = res.data
  })
}

function chooseProvince(type) {
  // 户口
  if (type == 0) {
    let province = provinceList.value.find(item => item.name == form.value.residentProvince)
    cityList.value = province.children
  }
  // 现居住地
  if (type == 1) {
    let province = provinceList.value.find(item => item.name == form.value.nowProvince)
    cityList.value = province.children
  }
}

function chooseCity(type) {
  // 户口
  if (type == 0) {
    let province = cityList.value.find(item => item.name == form.value.residentCity)
    regionList.value = province.children
  }
  // 现居住地
  if (type == 1) {
    let province = cityList.value.find(item => item.name == form.value.nowCity)
    regionList.value = province.children
  }
}

function chooseRegion(type) {
  // 户口
  if (type == 0) {
    let province = regionList.value.find(item => item.name == form.value.residentRegion)
    streetList.value = province.children
  }
  // 现居住地
  if (type == 1) {
    let province = regionList.value.find(item => item.name == form.value.nowRegion)
    streetList.value = province.children
  }
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["elderlyRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateServiceObject(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          getElderlyInfo()
        });
      }
    }
  });
}

/** 获取详情 */
function getElderlyInfo() {
  getServiceObject(id.value).then(response => {
    form.value = response.data;
  })
}

/** 获取跟进记录 */
function getFollowUpList() {

}

/** 获取参观记录 */
function getVisitList() {

}

/** 获取操作记录 */
function getOperationList() {

}

/** 返回按钮操作 */
function handleClose() {
  const obj = {path: "/customer_management/elderly_management/elderlyList"}
  proxy.$tab.closeOpenPage(obj)
}
</script>

<style scoped lang="scss">
.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.desc_ {
  flex: 1;
  margin-left: 30px;
}

.desc_ > div {
  margin: 10px 0;
}

.btn-box {
  text-align: center;
  margin-right: 50px;
}

.btn-box > div {
  margin: 10px auto;
}

.select-box {
  width: 200px;
  margin-right: 10px;
}

.btn_ {
  position: absolute;
  right: 5px;
  bottom: 5px;
}
</style>